<template>
  <div class="fall" v-if="list.length != 0">
    <div class="fall-title">
      <div class="fall-title-fake">查看更多</div>
      <img class="fall-title-bg" :src="typeFilter(type)" alt="" />
      <div class="fall-title-more" @click="handleSeeMore">查看更多</div>
    </div>
    <div class="fall-group">
      <template v-for="pic in list" :key="pic.goods_id">
        <img class="fall-item" :src="pic.original_img" />
      </template>
    </div>
  </div>
</template>

<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import {
  computed,
  onMounted,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
  defineEmits,
} from "vue";
import { useRoute, useRouter } from "vue-router";
// 获取props
const props = defineProps({
  list: [Array],
  type: [String, Number],
});
const emit = defineEmits(["changePage"]);

const imgUrl = computed(() => {
  return process.env.VUE_APP_BASE_API;
});

//获取路由
const $_route = useRoute();
const $_router = useRouter();
const onCurrentChange = page => {
  console.log(page);
  emit("changePage", page);
};
const handleSeeMore = () => {
  $_router.push({
    path: "/product",
  });
};
const typeFilter = type => {
  if (type % 2 == 0) {
    return require("@/assets/images/image(4).png");
  } else {
    return require("@/assets/images/image(5).png");
  }
};
</script>

<style lang="scss" scoped>
.fall {
  @include flex(flex-start, center);
  flex-direction: column;
  width: 100%;
  height: 100%;

  .fall-title {
    @include flex(flex-start, center);
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    // border-bottom: 3px solid #e1e1e1;
    box-sizing: border-box;

    .fall-title-fake {
      flex-grow: 1;
      visibility: hidden;
    }

    .fall-title-bg {
      width: 600px;
      height: 70px;
    }
    .fall-title-more {
      margin-bottom: 20px;
      flex-grow: 1;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fa6400;
      line-height: 22px;
      text-align: right;
      cursor: pointer;
    }
  }

  .fall-group {
    @include flex(flex-start, flex-start);
    flex-wrap: wrap;
    width: 100%;

    .fall-item {
      margin-right: 5px;
      margin-bottom: 5px;
      width: calc((100% - 35px) / 8);
      height: 88px;

      &:nth-child(26n + 1),
      &:nth-child(26n + 2),
      &:nth-child(26n + 3),
      &:nth-child(26n + 4),
      &:nth-child(26n + 5),
      &:nth-child(26n + 6),
      &:nth-child(26n + 7),
      &:nth-child(26n + 8),
      &:nth-child(26n + 9),
      &:nth-child(26n + 10) {
        width: calc((100% - 20px) / 5);
      }

      &:nth-child(26n + 5),
      &:nth-child(26n + 10) {
        margin-right: 0;
      }

      &:nth-child(26n + 18),
      &:nth-child(26n + 26) {
        margin-right: 0;
      }
    }
  }
}
</style>
